<template>
  <view class="userItem">
    <view class="userImg">
      <image :src="src" mode="scaleToFill" />
    </view>
    <view class="userContent">
      <view class="baseData">
        <view class="userName">金火柴</view>
        <view class="updateTime">1周内更新</view>
      </view>
      <view class="otherData">
        <view class="fansNumber">粉丝数1.2w | 帖子9999</view>
        <FollowStyle :isFollow="true" followText="你的关注" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

import FollowStyle from "@/components/FollowStyle";

const src = ref(
  "https://ts1.cn.mm.bing.net/th/id/R-C.526534e86fbf5b0393c3786476354596?rik=4c%2f6H8efTGfetQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20190403%2f21%2f1554298696-ctPdXnbaVY.jpg&ehk=HWIBm7fjChTkc8AQW2zPCN5yhY5zWv6tHy2gfK7wZ2A%3d&risl=&pid=ImgRaw&r=0"
);

const notView = ref(true);
</script>

<style lang="scss">
.userItem {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}
.userImg {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
}
.userContent {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #dcdcdc;
}
.baseData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  .userName {
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
  }
  .updateTime {
    color: rgba(153, 153, 153, 1);
    font-size: 18rpx;
  }
}
.otherData {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;

  .fansNumber {
    color: rgba(153, 153, 153, 1);
    font-size: 22rpx;
  }

  .isYpurFollow {
    color: rgba(153, 153, 153, 1);
    font-size: 22rpx;
  }
}
</style>
